<template>
  <div id="aplayer" class="mainPage" ref="playerRef"></div>
</template>
<script setup>
//npm i hls.js --save 和npm APlayer
import Hls from 'hls.js';
import APlayer from "APlayer";
import "APlayer/dist/APlayer.min.css"; //导入样式
import { reactive,onBeforeUnmount, onMounted, watch, computed } from "vue";
import useMusicStore from "../stores/useMusicStore";
import musicHttp from "../api/musicHttp";
const musicStore = useMusicStore();
var ap;
//生命周期
onMounted(() => {
  addAudio();
});

//播放器设置
function addAudio() {
  ap = new APlayer({
    container: document.getElementById("aplayer"), //获取音乐播放器节点
    audio: audio, //歌单
    fixed: false, //吸底模式
    //mini:false, //迷你模式(与吸底模式只能2选1,都不选则普通模式)
    lrcType: 3, //传递歌词方式lrc 1是js字符串 3是lrc文件
    autoplay: false, //音频自动播放
    order: "list", //'list' 列表| 'random'随机
    listFolded: false, //音频是否自动折叠
    listMaxHeight: "200px", //列表最大高度
    theme: "aquamarine", //主题色,
    loop: "all", //'all' | 'one' | 'none'// 音频循环播放
    preload: "auto", //'auto' | 'metadata' | 'none' 预加载
    mutex: true, // 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
    storageName: "aplayer-setting", // 存储播放器设置的 localStorage key
  });
  return ap;
}
//当前播放歌单
const audio = reactive([
  {
    name: "记念", //歌名
    artist: "李大猿", //歌手
    url: "http://localhost:8080/EMO//music/记念.mp3", //音频文件地址
    cover: "http://localhost:8080/EMO//musicImages/记念.jpg", //音乐封面地址
    lrc: "http://localhost:8080/EMO//musicLrc/记念.lrc", // 歌词，
    //theme:"" //切换到此音频的主题色
  },
]);

//ap.lrc.show()
//通过id修改正在播放的音乐
function xg(musicId) {
  musicHttp.getMusic(musicId).then((res) => {
    const data = res.data;
    const array = {
      name: data.musicTitle, //歌名
      artist: data.singer, //歌手
      url: data.musicAddress, //音频文件地址
      cover: data.imgAddress, //音乐封面地址
      lrc: data.lrcAddress, // 歌词，
      theme: "green", //切换到此音频的主题色
    };
    console.log("music组件:正在播放", array);
    ap.list.add(array); //添加一首歌到播放列表
    ap.list.remove(0); //从播放列表移除一个音频
    ap.list.hide(); //隐藏播放菜单
    //ap.skipForward() //切换到下一首音频
    ap.play(); //开始播放
  });
}
//计算id，看看id变了吗
const mid = computed(() => {
  return musicStore.nowMusicId;
});
//id变化触发事件
watch(mid, () => {
  xg(musicStore.nowMusicId);
});

// 组件卸载时销毁音乐播放器
onBeforeUnmount(() => {
  if (ap) {
    ap.destroy();
  }
});
</script>

<style scoped>
.mainPage{
  margin: 0px;
  border-radius: 15px;
}
/* 加一个阴影 */
.mainPage:hover{
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);
}
</style>